<template>
	<view>
		<view class="course-top">
			<view class="ct-img">
				<img :src="info.images" alt="" style="width: 100%; height: 100%;	border-radius: 10rpx;	">
			</view>
			<view class="ct-content">
				<view class="tc-name">
					{{info.name}}
				</view>
				<view class="tc-age">
					学龄阶段：{{info.schoolAge}}
				</view>
			</view>
		</view>
		<view class="course-intro">
			<u-sticky bgColor="#fff" :enable="true">
				<u-tabs :list="tabsList" :is-scroll="false" active-color="#c9162e" :current="tabsCurrent"
					@change="tabsChange"></u-tabs>
			</u-sticky>
			<view v-if="tabsCurrent === 0">
				<ticketImgDetail :info='info'></ticketImgDetail>
			</view>
			<view v-if="tabsCurrent === 1">
				<noteDetail :info='info'></noteDetail>
			</view>
			<view v-if="tabsCurrent === 2">
				<applicationOnline :info='info'></applicationOnline>
			</view>
		</view>
		<view class="orther-style">
			<view class="orther-course">其他课程</view>
			<courseList :courseListData="courseListData"></courseList>
		</view>
		<bottomNav :bottomContent ='bottomContent':bottomColor='bottomColor' :subjectId = 'courseId'></bottomNav>
	</view>
</template>

<script>
	import ticketImgDetail from './component/textImgDetail.vue';
	import noteDetail from './component/noteDetail.vue';
	import applicationOnline from './component/applicationOnline.vue';
	import courseList from '@/components/courseList.vue';
	import {getCourseDetailInfo,getCourseList} from '@/utils/api.js'
	import bottomNav from '@/components/bottomNav.vue'
	export default {
		components: {
			ticketImgDetail,
			noteDetail,
			applicationOnline,
			courseList,
			bottomNav
		},
		data() {
			return {
				tabsList: [{
						name: '图文详情',
						disabled: false
					},
					{
						name: '报名须知',
						disabled: false
					},
					{
						name: '在线报名',
						disabled: false
					}
				],
				tabsCurrent: 0,
				courseId:'',
				courseListData:[],
				info:{},
				bottomContent:'预约试听',
				bottomColor:'#c90d36'
			}
		},
		 onLoad(options) {
		    console.log(options.id,"111");
			this.courseId = options.id
			this.getCourseList()
			this.getCourseDetailInfo()
			
		  },
		methods: {
			async getCourseDetailInfo(){
				console.log("this.courseId",this.courseId);
				const res = await getCourseDetailInfo(this.courseId)
				this.info = res.data
			    // this.corseList = res.rows	
			},
			async getCourseList(){
				const res = await getCourseList()
				
			    this.courseListData = res.rows.filter(obj => obj.id !== this.courseId.toString());	
			},
			tabsChange(index) {
				this.tabsCurrent = index;
			},
			appointListen(){
				uni.navigateTo({
					url: '/pages/course/courseList' 
				})
			},
			
		}
	}
</script>
<style>
	page {
		background-color: #efefef;
	}
</style>

<style scoped lang="scss">
	.course-top {
		width: 100%;
		height: 190rpx;
		background-color: #ffffff;
		display: flex;

	}

	.ct-img {
		width: 120rpx;
		height: 120rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.ct-content {
		margin-left: 20rpx;
		margin-top: 30rpx;
	}

	.tc-name {
		font-weight: bold;
		font-size: 38rpx;
	}

	.tc-age {
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.course-intro {
		width: 100%;
		height: 200rpx;
		margin-top: 20rpx;
	}

	.orther-course {
		font-weight: bold;
		letter-spacing: 2rpx;
		padding-top: 40rpx;
		margin-left: 20rpx;
	}

	.orther-style {
		margin-top: 50rpx;
		width: 100%;
		background-color: #ffffff;
	}

	
	

	
	
	

</style>